<template>
	<view class="loding-con">
		<view class="loding-end line-center" v-if='loadEnd'>
			<view class='line'></view>
			<view class="site-logo">
				<image src='../../static/logo.png'></image>
			</view>
			<!-- <view class="end-t site-name">{{siteName}}</view> -->
			<view class='line'></view>
		</view>
		<view class="loding line-center" v-else>
			<view class="loading-icon distributor-anim distributor-anim-rotate distributor-anim-loop">
				<uni-icons type='spinner-cycle' size="28" color='#707070'></uni-icons>
			</view>
			<view class="end-t">努力加载中~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"loading",
		props:{
			loadEnd:Boolean
		},
		data() {
			return {
				siteName:''
			};
		},
		created() {
			this.siteName = uni.getStorageSync('SITE_NAME') ? uni.getStorageSync('SITE_NAME') : '食态通鲜'
		},
	}
</script>

<style lang="scss" scoped>
	.loding-con {
		padding-top: 40rpx;
		margin:auto;
	}
	
	.loding,
	.loding-end {
		color: #707070;
		font-size: 26rpx;
	}
	.loading-icon{
		width: 28px;
		height: 28px;
	}
	.loding-end{
		opacity: 0.3;
		.line{
			width: 160rpx;
			height: 2rpx;
			background-color: #707070;
			position: relative;
			top:-10rpx;
		}
		.site-name{
			font-family: YouSheBiaoTiHei;
			font-size: 44rpx;
			font-weight: normal;
			padding: 0 20rpx 0 30rpx;
			letter-spacing: 10rpx;
		}
	}
	.site-logo{
		width: 198rpx;
		height: 69rpx;
		margin:0 20rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.end-t {
		padding: 0 10rpx;
	}
	.distributor-anim {
		-webkit-animation-duration: .3s;
		animation-duration: .3s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both
	}
	
	.distributor-anim-rotate {
		-webkit-animation-name: distributor-rotate;
		animation-name: distributor-rotate;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear
	}
	
	.distributor-anim-loop {
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite
	}
	
	@-webkit-keyframes distributor-rotate {
		from {
			-webkit-transform: rotate(0)
		}
	
		to {
			-webkit-transform: rotate(360deg)
		}
	}
	
	@keyframes distributor-rotate {
		from {
			transform: rotate(0)
		}
	
		to {
			transform: rotate(360deg)
		}
	}
	

</style>